<template>
    <div class="home">
        <banner></banner>
        <main>
            <jobs-block></jobs-block>
            <div class="advertisement container">
                <div class="ad-up">
                    <img src="../../assets/images/banner03.png" alt="">
                </div>
                <div class="ad-down">
                    <div class="ad-02 fl">
                        <img src="../../assets/images/banner02.png" alt="">
                    </div>
                    <div class="ad-03 fr">
                        <img src="../../assets/images/banner01.png" alt="">
                    </div>
                </div>
            </div>
            <school-block></school-block>
            <institutions-block></institutions-block>
            <information-block></information-block>
            <div class="friend-link container">
                <div class="header">
                    <div class="title">友情链接</div>
                </div>
                <ul class="link-list">
                    <li v-for="(item, index) in linkList" :key="index+'l'">{{item}}</li>
                </ul>
            </div>
        </main>
    </div>
</template>

<script>
    import Banner from '@/pages/home/components/Banner.vue'
    import JobsBlock from '@/pages/home/components/JobsBlock.vue'
    import SchoolBlock from '@/pages/home/components/SchoolBlock.vue'
    import InstitutionsBlock from '@/pages/home/components/InstitutionsBlock.vue'
    import InformationBlock from '@/pages/home/components/InformationBlock.vue'

    export default {
        name: "Home",
        components: {
            Banner,
            JobsBlock,
            SchoolBlock,
            InstitutionsBlock,
            InformationBlock
        },
        data() {
            return {
                linkList: [
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技',
                    '嘉瑞科技'
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .home {
        background: @bac-color;
    }
    main {
        background: #F7F8FA;
        .advertisement {
            height: 191px;
            margin-top: 18px;
            .ad-up {
                height: 91px;
            }
            .ad-down {
                height: 91px;
                margin-top: 10px;
                .ad-02,.ad-03 {
                    width: 594px;
                    height: 90px;
                }
            }
        }
        .friend-link {
            margin: 42px auto;
            height: 156px;
            padding: 32px 15px 0 15px;
            box-sizing: border-box;
            background: #fff;
            .header {
                border-bottom: 1px solid #EBEBEB;
                .title {
                    width: 67px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 16px;
                    position: relative;
                    &:after  {
                        content: '';
                        display:inline-block;
                        width:100%;
                        height:2px;
                        border-radius: 1px;
                        background: #CF1311;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }
                }
            }
            .link-list {
                width: 1170px;
                height: 60px;
                display: flex;
                padding-top: 10px;
                flex-wrap: wrap;
                li {
                    margin: 5px 15px;
                    min-width: 58px;
                    height: 20px;
                    /*min-width: 58px;*/
                    font-size: 15px;
                    color: #959595;
                }
            }
        }
    }
</style>
